﻿<!-- 
  文件名称: data_import.html
  完整存储路径: E:\DEV_CONTEXT\1_Projects\VISION_HEALTH_SYSTEM_VUE\frontend\templates\data_import.html
  功能说明:
      数据导入测试页面，支持上传 Excel(.xlsx) 和 CSV(.csv) 文件。页面继承自基础模板(base.html)，
      并在主内容区(main-content-container)内显示。包含文件拖拽/选择、数据年份选择及上传按钮，
      后端上传接口URL通过隐藏字段存储，并在 data_import.js 中使用 fetch() 发起 POST 请求。
  使用说明:
      1. 在浏览器中访问 /import 路由，进入该页面。
      2. 下拉选择数据年份(默认2023)，再点击“选择文件”或拖拽文件到上传区域选取测试文件。
      3. 点击“上传文件”按钮开始上传，上传结果(成功记录数、失败记录数及失败记录文件下载链接)会在页面下方显示。
      4. 若需取消上传，可点击“取消”按钮，清空已选择的文件。
-->

{% extends "layouts/base.html" %}

{% block title %}数据导入 - 近视预防干预系统{% endblock %}

{% block content %}
<div class="container mt-4">
  <div class="row">
    <div class="col-12 col-md-10 offset-md-1">
      <!-- 外部卡片容器，使用 Bootstrap 样式 -->
      <div class="card shadow-sm">
        <!-- 卡片头部 -->
        <div class="card-header bg-primary text-white">
          <h2 class="h4 mb-0">数据导入</h2>
        </div>
        <!-- 卡片主体内容 -->
        <div class="card-body">
          <p class="text-muted">
            请选择或拖拽要导入的 Excel (.xlsx) 或 CSV (.csv) 文件。上传后将自动校验数据，
            合格记录保存到数据库，失败记录生成“上传失败记录表”供下载查看。
          </p>
          
          <!-- 上传区域 -->
          <div id="uploadArea" 
               class="border rounded p-4 mb-4 text-center" 
               style="min-height:150px; transition: background 0.3s;">
            <p class="text-muted mb-2">将文件拖放到此处或点击按钮选择文件</p>
            <button id="selectFileBtn" class="btn btn-primary">选择文件</button>
            <!-- 隐藏的文件输入控件 -->
            <input type="file" id="fileInput" style="display: none;" multiple>
          </div>
          
          <!-- 已选文件列表 -->
          <div id="fileList" class="mb-3"></div>
          
          <!-- 数据年份选择 + 上传操作 -->
          <div class="row g-3 align-items-center mb-3">
            <div class="col-auto">
              <label for="dataYearSelect" class="col-form-label fw-bold">选择数据年份</label>
            </div>
            <div class="col-auto">
              <select id="dataYearSelect" class="form-select">
                {% for year in range(2023, 2031) %}
                <option value="{{ year }}">{{ year }}</option>
                {% endfor %}
              </select>
            </div>
        </div>
        
        <!-- 重复数据处理选项 
          <div class="row g-3 align-items-center mb-3">
            <div class="col-auto">
                <label for="updateModeSelect" class="col-form-label fw-bold">重复数据处理</label>
            </div>
            <div class="col-auto">
                <select id="updateModeSelect" class="form-select">
                    <option value="skip">跳过重复记录</option>
                    <option value="update">更新已有记录</option>
                    <option value="merge">合并非空字段</option>
                </select>
            </div>
          </div>
          
          导入模式选择 
          <div class="row g-3 align-items-center mb-3">
              <div class="col-auto">
                  <label for="importModeSelect" class="col-form-label fw-bold">导入模式</label>
              </div>
              <div class="col-auto">
                  <select id="importModeSelect" class="form-select">
                      <option value="fill_only">仅填充空字段（推荐）</option>
                      <option value="override_allowed">允许覆盖已有数据（需权限）</option>
                  </select>
              </div>
          </div>
          
          权限提示
          <div id="permissionWarning" class="alert alert-warning mt-2" style="display: none;">
              <i class="fas fa-exclamation-triangle"></i> 
              覆盖模式需要管理员权限，普通用户只能使用填充模式
          </div>
          -->
          <div class="d-flex flex-wrap gap-2 mb-3">
            <button id="uploadBtn" class="btn btn-success">
              <i class="bi bi-upload me-1"></i>上传文件
            </button>
            <button id="cancelBtn" class="btn btn-danger">
              <i class="bi bi-x-circle me-1"></i>取消
            </button>
          </div>
          
          <!-- 上传结果状态显示区域 -->
          <div id="uploadStatus" class="mt-3"></div>
          
          <!-- 隐藏字段存储上传接口 URL -->
          <input type="hidden" id="importStudentsUrl" value="{{ url_for('import_api.import_students') }}">
        </div> <!-- end .card-body -->
      </div> <!-- end .card -->
    </div> <!-- end .col-12 col-md-10 offset-md-1 -->
  </div> <!-- end .row -->
  
  <!-- 导入结果显示区域 -->
  <div id="import-result" class="mt-4" style="display: none;">
    <div class="alert alert-info">
        <h5><i class="fas fa-check-circle"></i> 导入完成</h5>
        <div id="import-summary">
            <div class="row">
                <div class="col-md-3">
                    <div class="stat-item">
                        <span class="stat-number text-success" id="success-count">0</span>
                        <span class="stat-label">新增记录</span>
                </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-item">
                        <span class="stat-number text-warning" id="update-count">0</span>
                        <span class="stat-label">更新记录</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-item">
                        <span class="stat-number text-info" id="duplicate-count">0</span>
                        <span class="stat-label">重复记录</span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-item">
                        <span class="stat-number text-danger" id="error-count">0</span>
                        <span class="stat-label">错误记录</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 错误日志下载区域 -->
        <div id="error-log-section" class="mt-3" style="display: none;">
            <hr>
            <h6><i class="fas fa-exclamation-triangle text-warning"></i> 错误记录详情</h6>
            <p class="text-muted">以下是导入过程中遇到的错误记录，您可以下载详细的错误日志进行查看：</p>
            <button id="download-error-log" class="btn btn-warning btn-sm mb-3">
                <i class="fas fa-download"></i> 下载错误日志
            </button>
            
            <!-- 错误预览区域 -->
            <div id="error-preview" class="mt-3" style="display: none;">
                <h6>错误预览（前5条）：</h6>
                <div class="bg-light p-3 rounded" style="max-height: 200px; overflow-y: auto;">
                    <pre id="error-content" class="mb-0"></pre>
                </div>
            </div>
        </div>
    </div>
  </div>
</div> <!-- end .container -->
{% endblock %}

{% block scripts %}
  {{ super() }}
  <!-- 引入 data_import.js 脚本，确保在底部只声明一次 -->
  <script src="{{ url_for('static', filename='js/data_import.js') }}"></script>
{% endblock %}
